<template>
    <!-- 头部 -->
    <header class="header">
        <!-- 头部的第一行 -->
        <div class="top">
            <div class="container">
                <div class="typeList">
                    <a href="javascript:" class="iconfont">&#xe629;&nbsp;收藏网站</a>
                    <router-link to="/register" class="iconfont">&#xe635;&nbsp;快速注册</router-link>
                    <router-link to="/login" class="iconfont">&#xe636;&nbsp;会员登录</router-link>    
                </div>
            </div>
            
        </div>
        <!--头部第二行 图片区域-->
        <div class="middle">
            <img class="middle-img" src="@/assets/images/banner.png" alt="">
            <div class="logo-content">
                <img src="@/assets/images/logo.png" alt="" class="logo">
            </div>

        </div>
        <!--头部第二行 nav-->
        <div class="type-nav">
            <nav class="nav">
                <router-link to="/">网站首页</router-link>
                <router-link to="/association">关于我们</router-link> 
                <router-link to="/">动态展示</router-link>
                <router-link to="/">组织风采</router-link>
                <router-link to="/project">项目中心</router-link>
                <router-link to="/laws">政策法规</router-link>
                <router-link to="/concat">联系我们</router-link>
            </nav>
        </div>
    </header>
</template>

<script setup lang="ts">
</script>

<style scoped lang="less">
.header {
    .top {
        margin: 0 auto;
        width: 100%;
        height: 40px;
        background: #009CF2;
        line-height: 40px;
        .container {
            width: 1200px;
            overflow: hidden;
            margin: 0 auto;
            .typeList {
                float: right;
                a {
                    color: #FEFEFE;
                    padding: 0 10px;
                    font-size: 14px;
                    & + a {
                        border-left: 1px solid #FEFEFE;
                    }
                    img{
                        vertical-align: middle;
                    }
                } 
            }
        }
            
    }
    .middle{
        margin: 0 auto;
        width: 100%;
        position: relative;
        img{
            display: block;
        }
        .middle-img {
            width: 100%;
        }
    }
    & > .type-nav {
        width: 100%;
        margin: 0 auto;
        display: flex;
        position: relative;
        height: 60px;
        background: #00396B;
        .nav {
            width: 1200px;
            margin: 0 auto;
            text-align-last:justify;
            a {
               
                height: 45px;
                margin: 0 50px;
                line-height: 60px;
                font-size: 16px;
                color: #FFFFFF;
                text-decoration: none;
                
            }
            a:hover{
                color: aqua;
            }
        }
    }
}
.logo-content {
    width: 1200px;
    position: absolute;
    top: 22px;
    margin-left: 50%;
    transform: translateX(-50%);
}
</style>
